<template>
	<div>
		<ul class="icons-ul">
			<li v-for='item in list' :key="item.id">
				<router-link to="/">
					<img :src="item.url"/>
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Icons',
		data(){
			return {
				list:[
					{id:1,name:'国内游',url:require('../../../assets/img/icon01.png')},
					{id:2,name:'住宿',url:require('../../../assets/img/icon02.png')},
					{id:3,name:'境外游',url:require('../../../assets/img/icon03.png')},
					{id:4,name:'海岛度假',url:require('../../../assets/img/icon04.png')},
					{id:5,name:'境外游',url:require('../../../assets/img/icon05.png')},
					{id:6,name:'出行方式',url:require('../../../assets/img/icon06.png')},
					{id:7,name:'周边游',url:require('../../../assets/img/icon07.png')},
					{id:8,name:'户外游',url:require('../../../assets/img/icon08.png')},
				],
			}
		}
	}
</script>

<style>
	a{
		text-decoration: none;
	}
	.icons-ul{
		border-bottom: 0.03rem solid gainsboro;
		overflow: hidden;
		padding: 0.6rem 0 0;
	}
	.icons-ul li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.icons-ul li img{
		height: 1rem;
		width:  1rem;
	}
	.icons-ul li p{
		color: #000000;
		padding-bottom: 0.5rem;
		margin-top: 0.15rem;
	}
</style>
